/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-12 10:50:09
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-12 16:55:37
 */
import React, { useState, useEffect } from 'react'
import Item from './Item'
import { useSelector, useDispatch } from 'react-redux'
export default function Main() {
  const selected = useSelector((state) => state.filter)
  const todos = useSelector((state) => {
    if (selected === 'all') {
      return state.todos
    } else if (selected === 'active') {
      return state.todos.filter((item) => !item.isDone)
    } else {
      return state.todos.filter((item) => item.isDone)
    }
  })

  console.log(todos, 777)
  console.log(selected, 888) //all  active  completed
  // const [isCheckedAll, setIsCheckedAll] = useState(false)
  const isCheckedAll = todos.every((item) => item.isDone)
  const dispatch = useDispatch()

  // useEffect(() => {
  //   if (selected === 'all') {
  //   } else if (selected === 'active') {
  //   } else {
  //   }
  // }, [selected])
  return (
    <section className="main">
      <input
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
        // checked={isCheckedAll}
        checked={isCheckedAll}
        onChange={(e) => {
          /* 全选的状态值 */
          // setIsCheckedAll(e.target.checked)

          dispatch({
            type: 'todos/all',
            payload: e.target.checked,
          })
        }}
      />

      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {todos.map((it) => (
          <Item key={it.id} todo={it} />
        ))}

        {/* <li>
          <div className="view">
            <input className="toggle" type="checkbox" />
            <label>学习</label>
            <button className="destroy" />
          </div>
          <input className="edit" value="Rule the web" onChange={() => {}} />
        </li> */}
      </ul>
    </section>
  )
}
